<template>
    <div class="detail">
        <!-- 详情页要接收数据,如何接收? -->
        <!-- 动态路径参数 /detail/:id => 对应this.$route.params 对应接收 -->

        <div>
            <template v-if="user()">
                <a>欢迎,{{ user() }}</a>
            </template>
            <!-- <template v-else>
                <router-link to="/login">去登录</router-link>
            </template> -->
        </div>


        <div v-if="info">
            <img :src="info.img" alt="">
            <p class="price">{{ info.price }}</p>
            <p class="name">{{ info.title }}</p>
            <p class="comment">{{ info.comment }}</p>
            <p class="shop">{{ info.currShop }}</p>
            <br>

            <!-- 加入购物车之前需要先判断用户是否登录
                1. 没有登录 -> 去登录 ->  登录成功再回来
                2. 已登录  -> 直接调后端接口,加入购物车  => 跳转购物车
             -->

            <button @click="addToShopCar">加入购物车</button>
        </div>


        <!-- 跳转同一个路由,传递不同的数据 => 视图不会更新? -->
        <!-- 跳转同一个路由,访问的是同一个组件, 组件不会重新初始化 ,不会重新调用钩子函数mounted  => id还是初次访问的数据  -->

        <!-- 怎么解决?
            虽然时同一个页面,同一个路由 => 但是路由数据(this.$route)确实发生了改变  => 可以监听$route
        
         -->

         <br>
         <br>
         <br>
         <br>
         <br>
        <div>
            <h2>查看类似商品</h2>
            <router-link tag="li" to="/detail/63bd29143e115e09268c825c">华为P50E</router-link>
            <router-link  tag="li" :to="{name:'detail',params:{id:'63bd29143e115e09268c825a'}}">HUAWEI nova 10z</router-link>
        </div>

    </div>
</template>

<script>
// import axios from 'axios';
import res from "@/data/goods.json";
console.log(res);
export default {
    name: "DetailView",
    data() {
        return {
            id: null,
            info: null,
        }
    },
    methods: {
        getGoods() {
            // http://localhost:3000/goods/getGoodsById?id=63bd29143e115e09268c81ea
            // 对应id获取商品信息
            this.info = res.list.find(v=>v._id === this.id);

            // axios.get("http://localhost:3000/goods/getGoodsById", {
            //     params: {   // axios => get传参
            //         id: this.id
            //     }
            // }).then(res => res.data).then(res => {
            //     var { status, data } = res;
            //     if (status == 200) {
            //         this.info = data;
            //         console.log(data);


            //         this.info = {
            //             "_id": "63bd29143e115e09268c8261",
            //             "title": "HUAWEI Mate 50 Pro 曲面旗舰 超光变XMAGE影像 北斗卫星消息  256GB 曜金黑 华为鸿蒙手机",
            //             "img": "https://img12.360buyimg.com/n7/jfs/t1/76034/22/22740/106548/63b68fefF9fadfdbd/7e045a2fa4451b14.jpg",
            //             "price": 6799,
            //             "comment": "5万+条评价",
            //             "currShop": "华为京东自营官方旗舰店"
            //         }
            //     }
            // })


        },
        addToShopCar(){

            // 声明式导航(标签跳转)
            // <router to="/xxx"></router>

            // 编程式导航 (JS代码跳转 ->  官方提供的方法 -> 可以实现页面跳转,更规范)

            // this.$route  =>  返回当前页面路由信息 (取值)
            // this.$router =>  路由实例(包含所有的路由配置  => 操作路由 修改路由,新增路由, 页面跳转)

            // router.push(toPath)  跳转至指定路由地址,会新增历史记录  =>  这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

            // router.push("/login") 
            // router.push({path,name,params,query}) 

            // router.replace(toPath)  跳转至指定路由地址,不会新增历史记录,替换跳转的当前历史记录(用新的历史记录覆盖原本的)   => 于是导航后不会留下 history 记录。

            // router.push("/login") 
            // router.push({path,name,params,query}) 


            // router.back();   类似于 history.back()  返回历史记录的前一条
            // router.forward();   类似于 history.forward()  返回历史记录的后一条
            // router.go();   类似于 history.go()   前进 后退 刷新

            // 问题: 
            // push版:  xxx->  /detail -> /login  ->  /detail
            // replace版:  xxx  ->  /detail -> /login (替换为) /detail
            // replace版:  xxx  ->  /detail (替换为) /login (替换为) /detail
            
            // back版:  xxx  ->  /detail ->  /login 回到 /detail

            if(this.user()){  //已登录
                // 调用接口 加入购物车   => 跳转购物车页
                this.$router.push("/car");
            }else{  // 没有登录  => 去登录 
                // location.href = "/#/login"    // 手搓版(hash路由)  -> 太low (官方有方法 -> 可以实现相同操作,更规范)

                // this.$router.push("/login");
                // this.$router.push({path:"/login",query:{id:this.id}});
                this.$router.push({path:"/login",query:{id:this.id}});
            }
        }
    },
    watch:{

        // 监听整个路由
        // $route(newVal){
        //     // console.log(newVal,oldVal);

        //     this.id = newVal.params.id;
        //     this.getGoods();
        // }

        // 监听路由下的params数据
        // "$route.params.id":function(newVal){
        //     console.log(newVal)
        // }

    },
    mounted() {

        // this.$route  =>  返回当前页面路由信息
        // this.$router =>  路由实例(包含所有的路由配置  => 修改路由, 页面跳转)

        console.log(this.$route);

        // 动态路径参数  /detail/:id
        // {params,query} = this.$route
        this.id = this.$route.params.id;
        this.getGoods();

        // query传参  
        // var {query} = this.$route
        // this.id = query.id;
        //  this.getGoods();
    },
    inject:["user"],
    beforeRouteEnter:function(to,from,next){
        console.log("beforeRouteEnter this",this);
        console.log("beforeRouteEnter to",to);
        console.log("beforeRouteEnter from",from);
        next();
    },
    // 相同路由 不同数据之间进行切换
    // 跳转当前路由,只是数据更新了 => 组件不会重新初始化,还会继续复用
    beforeRouteUpdate:function(to,from,next){
        console.log("beforeRouteUpdate this",this);
        console.log("beforeRouteUpdate to",to);
        console.log("beforeRouteUpdate from",from);

        if(to.params.id === from.params.id){  // 同商品
            next(false);
        }else{
            this.id = to.params.id;  // 新商品
            this.getGoods();   // 新数据 (异步 async await)
            next();
        }

    },
    //  导航离开该组件的对应路由时调用
    beforeRouteLeave:function(to,from,next){
        console.log("beforeRouteLeave this",this);
        console.log("beforeRouteLeave to2",to);
        console.log("beforeRouteLeave from2",from);

        // 如果不是去购物车,也不是去登录  -> 提示 要不要买?
        if(to.path != "/car" && to.path != "/login"){
            if(confirm("已经很便宜了,不考虑一下吗?")){
                next(false);
            }else{
                next();
            }
        }else{
            next();
        }

        // 数据编辑 
        // if(confirm("内容还未保存,是否离开?")){
        //     next();
        // }else{
        //     next(false);
        // }

    },

}
</script>


<style scoped>
.detail {
    padding: 10px;
}
</style>
